<template>
	<view>
		<view class="u-p-40 bg-white">
			<text class="u-font-36 font-weight-bold">提现金额</text>
			<view class="flex u-m-t-20">
				<text class="u-m-r-30 u-font-40 u-m-t-6">¥</text>
				<u-input v-model="form.amount" placeholder="输入提现金额"></u-input>
			</view>
		</view>
		<view class="flex flex-column u-m-30 u-p-30 bg-white rounded-10 box-shadow ">
			<text>请选择提现方式</text>
				<view v-for="item in list" :key="item.type">
					<view class="flex flex-column" @click="value = item.type" style="width: 100%;">
						<view class="flex justify-between">
							<view class="flex align-center u-p-y-20" >
								<u-icon v-if="item.type === 'wechat'" name="weixin-fill" size="50" color="#00c800"></u-icon>
								<u-icon v-if="item.type === 'alipay'" name="zhifubao-circle-fill" size="50" color="#06b4fd"></u-icon>
								<u-icon v-if="item.type === 'card'" name="../static/mine/balance-bank.png" size="50"></u-icon>
								<text class="u-m-l-20 u-font-24">{{item.name}}</text>
							</view>
							<u-radio-group v-model="value">
								<u-radio :name="item.type"></u-radio>
							</u-radio-group>
						</view>
						<view v-if="item.type === 'wechat' && value === 'wechat'" >
							<text class="text-dark">上传收款码</text>
							<u-upload @on-choose-complete="(lists,name)=>uploadChange(lists)" :auto-upload="false" ref="uUpload" maxCount="1"></u-upload>
						</view>
						<view v-if="item.type === 'alipay' && value === 'alipay'" >
							<u-field style="padding-left: 0;" v-model="form.account" label="支付宝账号" placeholder="请填支付宝账号"></u-field>
						</view>
						<view v-if="item.type === 'card' && value === 'card'" >
							<u-radio-group v-model="form.bank_id" wrap width="100%">
								<u-radio v-for="value in bankWithdrawInfo.bank_list" :key="value.id" :name="value.id" class="bank_radio">
									<view class="u-p-l-20">
										<view>{{value.bank_name}}</view>
										<view>卡号: ********{{value.card_no}}</view>
									</view>
								</u-radio>
							</u-radio-group>
							<navigator url="/pages/mine/settingInfo/settingCardList/settingCardList" class="text-primary u-p-y-20 text-center">点击去绑定银行卡</navigator>
						</view>
					</view>
				</view>
			<view class="flex flex-column u-m-t-20">
				<text class="text-greey">提现手续费 {{bankWithdrawInfo.tx_service_fee}}%</text>
				<text class="text-greey">最低可提现金额：¥{{bankWithdrawInfo.tx_min_price}}</text>
				<text class="text-greey">最高可提现金额：¥{{bankWithdrawInfo.tx_max_price}}</text>
			</view>
		</view>
		<view class="" style="margin: 80rpx 100rpx;">
			<dy-button size="default" width="576rpx" @click="sure" borderColor="var(--mainColor)">提交申请</dy-button>
		</view>
	</view>
</template>

<script>
	import { baseImgUrl} from '@/api/app.js'
	import { MineCenterApi } from '@/api/serves.js'
	import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				action: baseImgUrl,
				value: '',
				open: 0,
				isLoading: false,
				list: [
					{type:'wechat',name:'微信'},
					{type:'alipay',name:'支付宝'},
					{type:'card',name:'银行卡'},
				],
				fileList: [],
				bankWithdrawInfo: {
					alipay_tx: "0",
					bank_list: [],
					tx_max_price: "",
					tx_min_price: "",
					tx_service_fee: "",
					wechat_tx: "0"
				}, // 包含手续费信息 以及 银行
				form: {
					type: '', 
					amount: '',    // 金额
					images: '',    // 微信收款码
					account: '',   // 支付宝账号
					bank_id:'', // 银行id
				}
			};
		},
		onShow() {
			this.$store.dispatch('user/getUserInfo')
			this._withdraw()
		},
		methods: {
			...mapActions({
				upload:'user/upload'
			}),
			uploadChange(lists, type){
				this.upload(lists).then(res=> {
					if(res.length>0) {
						this.form.images = res[0]
					}
				})
			},
			_withdraw() {
				MineCenterApi.txConfig().then(res=> {
					if(res.code == 1) {
						this.bankWithdrawInfo = res.data
						if(res.data.alipay_tx == 0) this.list = this.list.filter(item=>item.type !== 'alipay')
						if(res.data.wechat_tx == 0) this.list = this.list.filter(item=>item.type !== 'wechat')
						this.value = this.list[0].type
						this.form.bank_id = this.bankWithdrawInfo.bank_list[0]?.id || ''
						console.log(this.form);
					}
				})
			},
			// 提现 
			sure() {
				if(!this.form.amount) return this.$Toast('请输入提现金额')
				switch (this.value){
					case 'wechat':
						if(this.$refs.uUpload[0].lists.length == 0) return this.$Toast('请选择收款码图片')
						this.form.type = 2
						break;
					case 'alipay':
						if(!this.form.account) return this.$Toast('请输入支付宝账号')
						this.form.type = 3
						break;
					case 'card':
						this.form.type = 1
						break;
					default:
						break;
				}
				this.wxWithdraw()
			},
			// 提现
			wxWithdraw() {
				console.log(this.form);
				this.$ShowLoading()
				this.isLoading = true
				MineCenterApi.tx_apply2(this.form).then(res=> {
					this.$HideLoading()
					this.isLoading = false
					console.log('提现', res);
					if(res.code == 1) {
						this.$Toast('申请成功')
						this.$store.dispatch('user/getUserInfo')
						setTimeout(() => {
							uni.navigateBack()
						}, 500);
					}else {
						this.$Toast(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.bank_radio{
	.u-radio{
		border-bottom: 1rpx solid #eee;
		padding: 10rpx 0;
	}
}
</style>
